import React from 'react';
import { Layout, Typography, Card, Row, Col, Avatar, Timeline, Button } from 'antd';
import { UserOutlined, MailOutlined, ArrowUpOutlined, CodeOutlined, SmileOutlined, ReadOutlined } from '@ant-design/icons';

const { Content } = Layout;
const { Title, Paragraph, Text } = Typography;

/**
 * 关于我页面
 * 展示个人简介、技能和兴趣爱好。
 */
const AboutPage = () => {
  // 滚动到顶部
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  const skills = [
    { icon: <CodeOutlined />, title: '前端开发', description: 'React, Vue, JavaScript, TypeScript' },
    { icon: <SmileOutlined />, title: 'UI 设计', description: 'Figma, Ant Design, Tailwind CSS' },
    { icon: <ReadOutlined />, title: '持续学习', description: '对新技术充满热情，乐于探索和分享。' },
  ];

  return (
    <Content className="bg-gray-50">
      {/* 顶部横幅 */}
      <div className="relative text-white py-16 text-center overflow-hidden">
        <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1522252234503-e356532cafd5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')" }}></div>
        <div className="absolute inset-0 bg-black opacity-50"></div>
        <div className="container mx-auto px-6 relative z-10">
          <Title level={1} style={{ color: 'black', marginBottom: '16px' }}>关于我</Title>
          <Paragraph style={{ color: '#628C99', fontSize: '18px', maxWidth: '800px', margin: 'auto' }}>
            一名热爱编码和创造的前端开发者。
          </Paragraph>
        </div>
        <div className="absolute bottom-0 left-0 right-0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="w-full">
                <path fill="#f8fafc" fillOpacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,128C960,139,1056,149,1152,144C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
      </div>
      
      <div className="container mx-auto px-6 py-12">
        {/* 个人简介 */}
        <Card style={{ marginBottom: '24px' }}>
          <Row align="middle" gutter={24}>
            <Col xs={24} sm={8} style={{ textAlign: 'center' }}>
              <Avatar size={128} icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
            </Col>
            <Col xs={24} sm={16}>
              <Title level={2}>你好</Title>
              <Paragraph>
                欢迎来到我的个人空间。我是一名热衷于构建美观、易用Web应用的前端开发者。我享受将想法通过代码变为现实的过程，并始终对学习新技术抱有极大的热情。
              </Paragraph>
              <Paragraph>
                除了编码，我还喜欢阅读、徒步和摄影，这些爱好让我的生活更加多彩，也为我带来了许多创作灵感。
              </Paragraph>
            </Col>
          </Row>
        </Card>

        {/* 我的技能 */}
        <Card title="我的技能" style={{ marginBottom: '24px' }}>
          <Row gutter={[16, 16]}>
            {skills.map(skill => (
              <Col xs={24} sm={8} key={skill.title}>
                <Card hoverable style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: '32px', color: '#1890ff', marginBottom: '16px' }}>
                    {skill.icon}
                  </div>
                  <Title level={4}>{skill.title}</Title>
                  <Paragraph>{skill.description}</Paragraph>
                </Card>
              </Col>
            ))}
          </Row>
        </Card>
        
        {/* 联系信息 */}
        <Card>
            <div className="text-center">
                <Title level={3}>与我联系</Title>
                <Paragraph>如果您有任何问题、建议或合作意向，随时欢迎通过邮件与我联系。</Paragraph>
                <Button type="primary" icon={<MailOutlined />} href="mailto:123456.com">
                    发送邮件
                </Button>
            </div>
        </Card>
      </div>
      
      {/* 回到顶部按钮 */}
      <Button 
        type="primary" 
        shape="circle" 
        icon={<ArrowUpOutlined />} 
        size="large"
        onClick={scrollToTop}
        style={{
          position: 'fixed',
          bottom: '40px',
          right: '40px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
        }}
        aria-label="回到顶部"
      />
    </Content>
  );
};

export default AboutPage; 